<template lang="html">
  <div class="vip_item">
    <div class="item_title sales_top">
      我的返利
      <span :class="is_ok ? 'checked' : ''" @click="selectOk">只看已结算订单</span>
    </div>
    <div class="sales">
      <van-tabs v-model="active" title-active-color="#F57267">
        <van-tab title="今天">
          <div class="sales_item"  @click="goUrl">
            <ul>
              <li>
                <h3>{{active_info.sales_day_amount.order_nu ? active_info.sales_day_amount.order_nu : 0}}</h3>
                <p>返利笔数</p>
              </li>
              <li>
                <h3>{{active_info.sales_day_amount.amount ? active_info.sales_day_amount.amount : 0}}</h3>
                <p>返利金额(元)</p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="近7天">
          <div class="sales_item"  @click="goUrl">
            <ul>
              <li>
                <h3>{{active_info.sales_seven_day_amount.order_nu ? active_info.sales_seven_day_amount.order_nu : 0}}</h3>
                <p>返利笔数</p>
              </li>
              <li>
                <h3>{{active_info.sales_seven_day_amount.amount ? active_info.sales_seven_day_amount.amount : 0}}</h3>
                <p>返利金额(元)</p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="近30天">
          <div class="sales_item"  @click="goUrl">
            <ul>
              <li>
                <h3>{{active_info.sales_month_amount.order_nu ? active_info.sales_month_amount.order_nu : 0}}</h3>
                <p>返利笔数</p>
              </li>
              <li>
                <h3>{{active_info.sales_month_amount.amount ? active_info.sales_month_amount.amount : 0}}</h3>
                <p>返利金额(元)</p>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="累计">
          <div class="sales_item"  @click="goUrl">
            <ul>
              <li>
                <h3>{{active_info.sales_amount.order_nu ? active_info.sales_amount.order_nu : 0}}</h3>
                <p>返利笔数</p>
              </li>
              <li>
                <h3>{{active_info.sales_amount.amount ? active_info.sales_amount.amount : 0}}</h3>
                <p>返利金额(元)</p>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>

</template>

<script>
export default {
  props: ['profile_asset'],
  data () {
    return {
      active: 0,
      is_ok: false,
      active_info: {
        sales_amount: { amount: 0, order_nu: 0 },
        sales_day_amount: { amount: 0, order_nu: 0 },
        sales_month_amount: { amount: 0, order_nu: 0 },
        sales_seven_day_amount: { amount: 0, order_nu: 0 }
      }
    }
  },
  watch: {
    profile_asset () {
      if (this.is_ok) {
        this.active_info = this.profile_asset.sales_info_ok
      } else {
        this.active_info = this.profile_asset.sales_info
      }
    }
  },
  created () {
    // this.getSales()
    if (this.is_ok) {
      this.active_info = this.profile_asset.sales_info_ok
    } else {
      this.active_info = this.profile_asset.sales_info
    }
  },

  methods: {
    selectOk () {
      this.is_ok = !this.is_ok
      if (this.is_ok) {
        this.active_info = this.profile_asset.sales_info_ok
      } else {
        this.active_info = this.profile_asset.sales_info
      }
    },
    goUrl () {
      this.$router.push('/merber/account_details')
    }
  }
}
</script>

<style lang="css" scoped>
</style>
